<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <LINK rel="stylesheet" href="other/bootstrap/css/bootstrap.min.css"/>
    <LINK rel="stylesheet" href="other/bootstrap-table/bootstrap-table.min.css"/>
    <script type="text/javascript" src="other/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="other/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="other/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="other/echarts/echarts.min.js"></script>
    <script>
        $(() => {
            init();
            bar();
            tb();
            setInterval("init()", 3000);
            setInterval("bar()", 5000);
            setInterval("tb_refresh()", 2000);
        });

        function init() {
            $("#usercount").html(Math.ceil(Math.random() * 100));
        }
        function tb_refresh(){
            $("#tb").bootstrapTable("refresh");
        }
        function tb() {
            $("#tb").bootstrapTable({
                url: 'http://localhost:3000/emp/list?id'+Math.random(),
                // pagination: true,
                // search: true,
                columns: [{
                    field: 'id',
                    title: '序号'
                }, {
                    field: 'name',
                    title: '姓名'
                }, {
                    field: 'birthday',
                    title: '出生日期'
                },
                    {
                        field: 'country',
                        title: '籍贯'
                    }, {
                        field: 'content',
                        title: '内容'
                    }
                ]
            });
        }

        function bar() {
            $.ajax({
                url: "http://10.2.234.234:3000/",
                method: "get",
                success: function (result) {
                    // alert(JSON.stringify(result))
                    var echart = echarts.init(document.getElementById("bar"));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '统计分析用户年龄情况'
                        },
                        tooltip: {},
                        legend: {
                            data: ['年龄对比']
                        },
                        xAxis: {
                            data: result.uname
                        },
                        yAxis: {},
                        series: [{
                            name: '年龄',
                            type: 'bar',
                            data: result.age
                        }]
                    };
                    echart.setOption(option);
                },
                error: function (error) {
                    alert("请求服务器失败!")
                }
            });

        }
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div id="usercount" class="panel panel-danger" style="font-size: 40px;background-color: #1b5fcc"
                 align="center">

            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-danger">

            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-danger">

            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-danger">

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div id="bar" style="width=100%;height:400px">

            </div>
        </div>
        <div class="col-md-6">
            <div id="tb" style="width=100%;height:400px">

            </div>
        </div>
    </div>
</div>
</body>
</html>